// useReducer作用：和useState的作用类似，用来管理相对复杂的状态数据

// useMemo作用：在组件每次重新渲染的时候缓存计算的结果(https://zh-hans.react.dev/reference/react/useMemo)
// useMemo使用：visibleTodos只受到todos和tab这两个数据的影响
//   const visibleTodos = useMemo(() => { return aaa }, [todos, tab]);

import { useReducer,useMemo } from "react"
function RightItem(props){
    const shopNum = (state, action) =>{
        switch(action.type){
            case 'INT':
                return Number(state) + 1
            case 'DEC':
                return Number(state) - 1
            case 'SET':
                return Number(state) + action.payload
            default:
                return Number(state)
        }
    }
    const [state, dispatch] = useReducer(shopNum, props.item.num)
    props.item.num = state
    return <div className="right-item flex-l">
        <img src={props.item.src}></img>
        <div>
            <div>{props.item.name}</div>
            <div className="flex">
                数量：<button onClick={()=>dispatch({type:'DEC'})}>-</button>{props.item.num}<button onClick={()=>dispatch({type:'INT'})}>+</button><button onClick={()=>dispatch({type:'SET',payload:100})}>+100</button>
            </div>
            <div>{props.item.price}</div>
            
            <button onClick={()=>props.add(props.item)}>添加</button>
        </div>
    </div>
}
export default RightItem